<template>
	<view :class="[primarySize()]">
		<view class="container bg-white">
			<view class="search_fix">
				<view class="search_con flex-box">
					<view class="address_con flex-box flex-center" @click="jumpLoacte">
						<image :src="iconPath('icon_address.png')" class="mr10" mode="aspectFit"></image>
						<view class="fs28 col0 m-ellipsis">{{city.name}}</view>
						<image src="https://admin.mosizp.cn/static/public/arrow_down.png" mode="widthFix" class="ico17 ml10"></image>
					</view>
					<input type='text' @input="bindKeyInput" class="flex-grow-1 fs28 col3 plr20" v-model="q"
						confirm-type="search" @confirm="search" placeholder-class="cold7"
						placeholder="请输入职位或公司"></input>
					<image @click="search" src="https://admin.mosizp.cn/static/public/icon_search.png" mode="aspectFit"></image>
				</view>
			</view>

			<view class="flex-box search_nav">
				<!-- <view class="flex-grow-1" :class="[status==0?'active':'']" @click="chooseNav(0)"><text>相关招聘信息</text></view>
		        <view class="flex-grow-1" :class="[status==1?'active':'']" @click="chooseNav(1)"><text>相关人才信息</text></view> -->
			</view>

			<view class="plr30 pb30" v-if="jobSearched">
				<block v-if="jobs.length>0">
					<job-list :jobs="jobs"></job-list>
					<button @click="fetchJob" hover-class="none" class="more_btn mt30">{{jobsMore.text}}</button>
				</block>
				<view class="nothing" v-if="jobs.length===0">
					<image class="img_nothing" src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFill"></image>
					<text>抱歉，暂无相关职位信息</text>
				</view>
			</view>



		</view>
	</view>
</template>

<script>
	const app = getApp()
	import jobList from '../../components/job-list/job-list.vue';
	export default {
		components: {
			jobList,

		},
		data() {
			return {
				city: {},
				resumes: [],
				resumesMore: {
					page: 1
				},
				jobs: [],
				jobsMore: {
					page: 1
				},
				status: 0,
				q: '',
				jobSearched: false,
				resumeSearched: false,
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {

			if (options.talent) {
				this.status = 1;
			}
			let keywords = options.keywords;
			this.q = keywords
			this.city = this.$core.getCurrentCity();
			uni.$on(app.globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange, this);
			let userinfo = this.$core.getUserinfo();
			if (!userinfo || userinfo.group_id == 1) {
				this.status = 1;
			}
			this.search();
		},
		onUnload() {
			uni.$off(app.globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange, this);
		},
		methods: {
			chooseNav(i) {
				this.status = i
			},
			jumpLoacte() {
				uni.navigateTo({
					url: '/pages/public/locate'
				})
			},
			eventOnCurrentCityChange(currentCity) {
				this.city = currentCity;
			},
			bindKeyInput(event) {
				this.q = event.detail.value.trim(); //不用setData，避免影响键盘输入
			},
			search() {
				if (this.q === '') {
					uni.showToast({
						title: '请输入搜索关键词'
					});
					return;
				}
				this.resumes = [];
				this.resumesMore = {
					page: 1
				}
				this.jobs = []
				this.jobsMore = {
					page: 1
				}
				this.jobSearched = false
				this.resumeSearched = false;
				//this.fetchResume();
				this.fetchJob();
			},

			fetchJob() {
				let page = this;
				this.$util.fetch(this, 'xilujob.job/lists', {
					q: this.q
				}, 'jobsMore', 'jobs', 'data', data => {
					page.jobSearched = true;
					return data.data;
				});
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding-top: 125rpx;
	}

	.search_main {
		background-color: #fff;
		position: relative;
		z-index: 31
	}

	.search_fix {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		padding: 20rpx 0;
		background-color: #fff;
		z-index: 31
	}

	.search_con {
		box-shadow: 0px 1rpx 18rpx 0px rgba(0, 0, 0, 0.08);
		background-color: #fff;
		border-radius: 85rpx;
		line-height: 85rpx;
		position: relative;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-right: 40rpx;
		z-index: 30
	}

	.search_con image {
		width: 28rpx;
		height: 29rpx;
	}

	.address_con {
		width: 196rpx;
		position: relative
	}

	.address_con::after {
		contain: "";
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1rpx;
		height: 27rpx;
		display: block;
		background-color: #000;
		opacity: 0.05
	}

	.search_con input {
		height: 85rpx;
	}

	.history_item {
		font-size: 24rpx;
		color: #666;
		float: left;
		line-height: 44rpx;
		border-radius: 25rpx;
		border: 1rpx solid #E2E2E2;
		padding: 0 20rpx;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
	}

	.search_list {
		padding-top: 68rpx;
	}




	/* 搜索结果 */
	.search_nav {
		line-height: 88rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
		font-weight: bold
	}

	.search_nav view text {
		display: inline-block;
		padding-bottom: 7rpx
	}

	.search_nav view.active text {
		border-bottom: 7rpx solid var(--primary);
		padding-bottom: 0
	}

	.none {
		padding-top: 163rpx;
	}

	.none image {
		width: 216rpx;
		height: 225rpx;
		display: block;
		margin: 0 auto
	}

	.none view {
		font-size: 30rpx;
		color: #d2d2d2;
		text-align: center;
		padding-top: 48rpx;
	}
</style>